.page-loader-wrap {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: $white;
  @include gradient-radial($white, darken($white, 10));
  z-index: 99999999;

  .page-loader-mask {
    display: block;
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background: $primary;
    @include gradient-directional($primary, lighten($primary, 20));
    z-index: 9999999;
  }

  .page-loader-container {
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 30px;
      background: transparent url("../images/logo-color.png") no-repeat center
        center;
      background-size: contain;
      bottom: -50px;
      position: absolute;
    }
  }

  .page-loader-default {
    @include default-loader();
  }

  @for $i from 1 through 9 {
    .page-loader-#{$i} {
      $mixinname: "loader-";
      @include include-loader(#{$i});
    }
  }
}
